<template>
	<view class="vistorProFile">
		<scroll-view class="scrollWrap" :enhanced="true" scroll-y :bounces="false" :show-scrollbar="false">
			<view class="wrap">
				<view>
					<view>来访者档案</view>
					<view>为更好地为你服务，咨询师在咨询前需要了解你的一些基本情况，你的信息不会被泄露，请你放心填写。</view>
					<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
						<u-form-item
							label="身份"
							labelWidth="90"
							required
							prop="recordIdentity"
							borderBottom
							@click="
								recordIdentityShow = true;
								hideKeyboard();
							"
							ref="item1"
						>
							<u-input v-model="model1.recordIdentity" disabled disabledColor="#ffffff" placeholder="请选择身份" border="none"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item required labelWidth="90" label="姓名" prop="recordName" borderBottom ref="item2">
							<u-input placeholder="请输入姓名" v-model="model1.recordName" border="none"></u-input>
						</u-form-item>
						<u-form-item
							label="性别"
							required
							labelWidth="90"
							prop="gender"
							borderBottom
							@click="
								showSex = true;
								hideKeyboard();
							"
							ref="item3"
						>
							<u-input v-model="model1.gender" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>

						<u-form-item required labelWidth="90" label="手机号码" prop="phoneNumber" borderBottom ref="item4">
							<u-input placeholder="请输入手机号码" v-model="model1.phoneNumber" border="none"></u-input>
						</u-form-item>
						<u-form-item
							labelWidth="90"
							label="出生日期"
							prop="birthDate"
							borderBottom
							@click="
								showBirthday = true;
								hideKeyboard();
							"
						>
							<u-input v-model="model1.birthDate" disabled disabledColor="#ffffff" placeholder="请选择出生日期" border="none"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item borderBottom labelWidth="90" label="邮箱" prop="email">
							<u-input placeholder="请输入邮箱" v-model="model1.email" border="none"></u-input>
						</u-form-item>
					</u-form>
				</view>
				<view>
					<view>紧急联系人</view>
					<view>在危机情况下，专家需要以下信息以确保你和他人安全，请务必如实填写，未成年人需要填写监护人信息。</view>
					<u-form labelPosition="left" :model="model2" :rules="rules2" ref="uForm2">
						<u-form-item labelWidth="90" label="姓名" prop="emergencyContactName" borderBottom>
							<u-input placeholder="请输入姓名" v-model="model2.emergencyContactName" border="none"></u-input>
						</u-form-item>
						<u-form-item labelWidth="90" label="手机号码" prop="emergencyContactPhone" borderBottom>
							<u-input placeholder="请输入手机号码" v-model="model2.emergencyContactPhone" border="none"></u-input>
						</u-form-item>
						<u-form-item labelWidth="90" label="邮箱" prop="emergencyContactEmail" borderBottom>
							<u-input placeholder="请输入邮箱" v-model="model2.emergencyContactEmail" border="none"></u-input>
						</u-form-item>
						<u-form-item
							label="关系"
							labelWidth="90"
							prop="emergencyContactRelation"
							borderBottom
							@click="
								showEmergencyContactRelation = true;
								hideKeyboard();
							"
						>
							<u-input v-model="model2.emergencyContactRelation" disabled disabledColor="#ffffff" placeholder="请选择关系" border="none"></u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</u-form>
				</view>
			</view>
		</scroll-view>
		<view class="btn">
			<view @click="submit">保存</view>
		</view>
		<u-picker
			:show="recordIdentityShow"
			:columns="recordIdentityList"
			keyName="label"
			title="请选择身份信息"
			@cancel="recordIdentityShow = false"
			@confirm="recordIdentitySelect"
		></u-picker>
		<u-picker
			:show="showEmergencyContactRelation"
			:columns="emergencyContactRelationList"
			keyName="label"
			title="请选择关系"
			@cancel="showEmergencyContactRelation = false"
			@confirm="sexSelectCopy"
		></u-picker>
		<u-picker :show="showSex" keyName="label" :columns="sexList" title="请选择性别" @cancel="showSex = false" @confirm="sexSelect"></u-picker>
		<u-datetime-picker
			:show="showBirthday"
			:value="birthday"
			mode="date"
			:minDate="-1577923200000"
			:maxDate="2871763199000"
			closeOnClickOverlay
			@confirm="birthdayConfirm"
			@cancel="birthdayClose"
			@close="birthdayClose"
		></u-datetime-picker>
	</view>
</template>

<script>
import { addConsultationRecord } from '@/api/consult/index.js';
export default {
	data() {
		return {
			showSex: false,
			showEmergencyContactRelation: false,
			showBirthday: false,
			birthday: Number(new Date()),
			model1: {
				recordIdentity: '',
				recordName: '',
				gender: '',
				birthDate: '',
				phoneNumber: '',
				email: ''
			},
			model2: {
				emergencyContactName: '',
				emergencyContactPhone: '',
				emergencyContactEmail: '',
				emergencyContactRelation: ''
			},
			recordIdentityList: [
				[
					{
						id: 1,
						label: '本人'
					},
					{
						id: 2,
						label: '配偶'
					},
					{
						id: 3,
						label: '父母'
					},
					{
						id: 4,
						label: '子女'
					}
				]
			],
			recordIdentityId: 0,
			recordIdentityShow: false,
			sexList: [
				[
					{
						id: 0,
						label: '男'
					},
					{
						id: 1,
						label: '女'
					},
					{
						id: 2,
						label: '保密'
					}
				]
			],
			sexId: -1,
			emergencyContactRelationList: [
				[
					{
						id: 1,
						label: '本人'
					},
					{
						id: 2,
						label: '配偶'
					},
					{
						id: 3,
						label: '父母'
					},
					{
						id: 4,
						label: '子女'
					}
				]
			],
			emergencyContactRelationId: 0,
			rules: {
				recordIdentity: {
					type: 'string',
					max: 2,
					required: true,
					message: '请选择身份信息',
					trigger: ['blur', 'change']
				},
				recordName: {
					type: 'string',
					required: true,
					message: '请输入姓名',
					trigger: ['blur', 'change']
				},
				gender: {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择性别',
					trigger: ['blur', 'change']
				},
				phoneNumber: [
					{
						type: 'string',
						required: true,
						message: '手机号码不能为空',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							if (value) {
								const phoneReg = /^(13[0-9]|14[5-9]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
								if (!phoneReg.test(value)) {
									callback(new Error('请输入有效的11位手机号码'));
								} else {
									callback();
								}
							}
						},
						trigger: ['blur']
					}
				],
				email: [
					{
						type: 'string',
						required: false,
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							if (value) {
								const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
								if (!emailReg.test(value)) {
									callback(new Error('请输入有效的邮箱'));
								} else {
									callback();
								}
							}
						},
						trigger: ['blur']
					}
				]
			},
			rules2: {
				emergencyContactPhone: [
					{
						type: 'string',
						required: false,
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							if (value) {
								const phoneReg = /^(13[0-9]|14[5-9]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
								if (!phoneReg.test(value)) {
									callback(new Error('请输入有效的11位手机号码'));
								} else {
									callback();
								}
							}
						},
						trigger: ['blur']
					}
				],
				emergencyContactEmail: [
					{
						type: 'string',
						required: false,
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							if (value) {
								const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
								if (!emailReg.test(value)) {
									callback(new Error('请输入有效的邮箱'));
								} else {
									callback();
								}
							}
						},
						trigger: ['blur']
					}
				]
			}
		};
	},
	watch: {
		'model1.gender'(newVal, oldVal) {
			this.$refs.uForm.validateField('gender');
		},
		'model1.recordIdentity'(newVal, oldVal) {
			this.$refs.uForm.validateField('recordIdentity');
		}
	},
	methods: {
		sexSelect(e) {
			this.model1.gender = e.value[0].label;
			this.sexId = e.value[0].id;
			this.$refs.uForm.validateField('gender');
			this.showSex = false;
		},
		sexSelectCopy(e) {
			this.showEmergencyContactRelation = false;
			this.model2.emergencyContactRelation = e.value[0].label;
			this.emergencyContactRelationId = e.value[0].id;
		},
		birthdayClose() {
			this.showBirthday = false;
		},
		birthdayConfirm(e) {
			this.showBirthday = false;
			this.model1.birthDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
		},
		//身份信息
		recordIdentitySelect(e) {
			this.recordIdentityId = e.value[0].id;
			this.model1.recordIdentity = e.value[0].label;
			setTimeout(() => {
				this.$refs.uForm.validateField('recordIdentity');
				this.recordIdentityShow = false;
			}, 300);
		},
		submit() {
			// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
			this.$refs.uForm
				.validate()
				.then((res) => {
					let obj = {
						birthDate: this.model1.birthDate,
						email: this.model1.email,
						emergencyContactEmail: this.model2.emergencyContactEmail,
						emergencyContactName: this.model2.emergencyContactName,
						emergencyContactPhone: this.model2.emergencyContactPhone,
						emergencyContactRelation: this.emergencyContactRelationId,
						gender: this.sexId,
						phoneNumber: this.model1.phoneNumber,
						recordIdentity: this.recordIdentityId,
						recordName: this.model1.recordName,
						userId: uni.getStorageSync('user_id')
					};
					addConsultationRecord(obj).then((res) => {
						this.$modal.showToast('新增档案成功');
						this.$tab.redirectTo(`/subset/pages/consult/visitorProfile/archiveList`);
					});
				})
				.catch((errors) => {
					uni.$u.toast('校验失败');
				});
		},
		hideKeyboard() {
			uni.hideKeyboard();
		}
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
		this.$refs.uForm2.setRules(this.rules2);
	}
};
</script>

<style scoped lang="scss">
.vistorProFile {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	overflow: hidden;

	.scrollWrap {
		width: 100%;
		height: calc(100% - 186rpx);

		.wrap {
			width: calc(100% - 60rpx);
			min-height: 100%;
			margin: 20rpx auto 0;

			> view:nth-child(1) {
				width: 100%;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 30rpx 20rpx 50rpx 20rpx;
				box-sizing: border-box;

				> view:nth-child(1) {
					font-size: 40rpx;
					color: #000;
					width: 100%;
					text-align: left;
				}

				> view:nth-child(2) {
					font-size: 26rpx;
					color: #c6c6c6;
					width: 100%;
					text-align: left;
					margin: 30rpx 0;
				}
			}

			> view:nth-child(2) {
				width: 100%;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 30rpx 20rpx 50rpx 20rpx;
				box-sizing: border-box;
				margin-top: 30rpx;

				> view:nth-child(1) {
					font-size: 40rpx;
					color: #000;
					width: 100%;
					text-align: left;
				}

				> view:nth-child(2) {
					font-size: 26rpx;
					color: #c6c6c6;
					width: 100%;
					text-align: left;
					margin: 30rpx 0;
				}
			}
		}
	}

	.btn {
		width: 100%;
		height: 166rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 80rpx;
		box-sizing: border-box;

		> view {
			width: 100%;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #ffffff;
			background: #76a26f;
			border-radius: 42rpx;
		}
	}

	::v-deep .u-form {
		width: calc(100% - 60rpx);
		margin: auto;
	}

	::v-deep .u-form-item__body {
		padding: 26rpx 0;
	}
}
</style>